<template>
  <div id="index">
    <Meun></Meun>
    <div class="content">
        <div class="search">
        	<input class="searchInput form-control" v-model="searchValue" type='text' placeholder="请输入硬件特征/实名信息/手机号/虚拟身份">
        	<div class="searchBtn">
        		<button class="searchAll btn btn-primary"  @click="searchTableData()">搜索</button>
        		<button class="searchDetail btn btn-primary">高级搜索</button>
        	</div>
        </div>
        <div class="searchInfo">
            <label>查询结果</label>
            <table class="table table-bordered">
            	<thead>
            		<tr>
            			<th>类型</th>
            			<th>账号</th>
            			<th>最后上线时间</th>
            			<th>最后出现场所</th>
            			<th>关联结果数</th>
            		</tr>
            	</thead>
            	<tbody>
            		<tr v-for="item in resultData">
            			<td>{{item.type}}</td>
            			<td>{{item.acount}}</td>
            			<td>{{item.time}}</td>
            			<td>{{item.place}}</td>
            			<td>{{item.relation}}</td>
            		</tr>
            	</tbody>
            </table>
            <label>关联结果</label>
            <div class="chartShow">
                <div class="pieChart">
                    <div id="pieChart" style="width:100%;height:400px;"></div>
                </div>
                <div class="lineChart">
                    <div id="lineChart" style="width:100%;height:400px;"></div>
                </div>
            </div>
            <label>详情展示 >>
              <Select v-model="classicID" style="width:200px" @on-change="fetchResult(classicID)">
                  <Option v-for="item in classList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </label>
            <table class="table table-bordered">
            	<thead>
            		<tr>
            			<th>类型</th>
            			<th>账号</th>
            			<th>关联次数</th>
            			<th>最后上线时间</th>
            			<th>最后出现场所</th>
            		</tr>
            	</thead>
            	<tbody>
            		<tr v-for="item in tableData">
            			<td>{{item.type}}</td>
            			<td>{{item.acount}}</td>
            			<td>{{item.relation}}</td>
            			<td>{{item.time}}</td>
            			<td>{{item.place}}</td>
            		</tr>
            	</tbody>
            </table>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Meun from '../../components/menu.vue'
export default {
  data () {
    return {
      searchValue: '',
      tableData: [],
      classicID: 3,
      classList: [
        {value:3,label:'全部'},
        {value:0,label:'硬件特征信息'},
        {value:1,label:'实名身份信息'},
        {value:2,label:'虚拟身份信息'}
      ],
      virtual:{},
      hardware: {},
      real:{},
      resultData: [],
      xAxisData: [],
      seriesData: [],
      pieChartOptions: {
        title : {
          text: '关联身份',
          x:'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'horizontal',
          top: '40px',
          data: []
        },
        series : [
          {
            name: '信息',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      lineChartOptions: {
        title : {
          text: '虚拟身份信息',
          x:'center'
        },
        color: ['#3398DB'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : [],
            axisTick: {
                alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            name:'数量',
            type:'bar',
            barWidth: '60%',
            data:[]
          }
        ]
      }
    }
  },
  components: {
    Meun
  },
  methods: {
    searchTableData () {
      this.getTableData (this.searchValue)
    },
    getTableData (key) {
      let query = {}
      if (key === undefined){
        query.searchInfo = this.$route.params.info
      } else {
        query.searchInfo = key
      }
      axios.get('static/json/test.json',{
        params: query
      })
      .then((response) => {
          let data = response.data
          this.printChart (data)
          this.changeChart()
          this.$Message.destroy()
      })
      .catch((error) => {
          console.log(error)
      })
    },
    fetchResult (id) {
      let query = {}
      query.classId = id
      axios.get('static/json/result.json',{
        params: query
      })
      .then((response) => {
          let data = response.data
          this.tableData = data.tableData
      })
      .catch((error) => {
          console.log(error)
      })
    },
    printChart (data) {
      this.resultData = data.resultData
      this.tableData = data.tableData
      this.pieChartOptions.series[0].data = data.chartData.leftChartData.data
      this.pieChartOptions.legend.data = data.chartData.leftChartData.item
      this.hardware = data.chartData.rightChartData.hardware
      this.virtual = data.chartData.rightChartData.virtual
      this.real = data.chartData.rightChartData.real
      let pieChart = this.$echarts.init(document.getElementById('pieChart'))
      pieChart.setOption(this.pieChartOptions)
      pieChart.on('click', params => this.changeChart(params))
    },
    changeChart (params) {
      let lineChart = this.$echarts.init(document.getElementById('lineChart'))
      if(arguments.length === 0){
        this.lineChartOptions.title.text = "虚拟身份信息"
        this.lineChartOptions.color[0] = '#61a0a8'
        this.lineChartOptions.xAxis[0].data = this.virtual.xAxisData
        this.lineChartOptions.series[0].data = this.virtual.seriesData
      } else {
        this.classicID = params.dataIndex
        this.classic = params.name
        this.lineChartOptions.title.text = params.name
        this.lineChartOptions.color[0] = params.color
       // 1 "实名身份信息" 0 "硬件特征信息" 2"虚拟身份信息"默认虚拟身份
        if(params.dataIndex === 0) {
          this.lineChartOptions.xAxis[0].data = this.hardware.xAxisData
          this.lineChartOptions.series[0].data = this.hardware.seriesData
        } else if(params.dataIndex === 1) {
          this.lineChartOptions.xAxis[0].data = this.real.xAxisData
          this.lineChartOptions.series[0].data = this.real.seriesData
        }else if (params.dataIndex === 2){
          this.lineChartOptions.xAxis[0].data = this.virtual.xAxisData
          this.lineChartOptions.series[0].data = this.virtual.seriesData
        }
      }
      lineChart.setOption(this.lineChartOptions)
    }
  },
  mounted () {
    this.getTableData()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
#index{
	position: fixed;
	width: 100%;
	height:100%;
    overflow: auto;
}
.content{
    width:80%;
    margin-left:10%;
    margin-top:100px;
    border: 1px solid #c5baba;
    border-radius: 5px;
    padding:50px;
}
.search{
	width: 676px;
	height:40px;
	margin:10px auto;
	.searchInput{
		width: 460px;
		height:40px;
		float: left;
	}
	.searchBtn{
		.searchAll{
			margin-left:10px;
			width: 100px;
			height:40px;
		}
		.searchDetail{
			width: 100px;
			height:40px;
		}
	}
}
.searchInfo{
    .chartShow{
        .pieChart{
            width: 49%;
            float:left;
        }
        .lineChart{
            width: 49%;
            border-left:1px solid black;
            float:left;
        }
        width: 100%;
        height:400px;
        border:1px solid black;
    }
}
label{
  margin-top: 20px;
}
table{
  background:#f7f7f7;
  th{
    text-align: center
  }
  text-align: center
}
</style>

